.header {
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
  background-color: $sidebar-background;
}

.logo {
  margin-top: 3rem;
  border-radius: 20%;
  border: 4px solid $white;
  transition: all $easing $speed;

  &:hover {
    border-radius: 50%;
    box-shadow: 0 1px 4px $box-shadow-darker;
  }

  @media screen and (max-width: $tablet) {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    margin-top: 0;
    border: 2px solid $white;
  }
}

.title {
  font-size: $size-4;
  font-family: $family-roboto;
  font-weight: $weight-bold;
  margin: 1rem auto;

  @media screen and (max-width: $tablet) {
    margin: 0 auto;
  }

  a {
    color: $white;
  }
}

.subtitle {
  margin-bottom: 1rem;
  color: $white;
  opacity: 0.8;
}

// Sidebar on desktop and header on mobile
.menu {
  display: none;

  @media screen and (min-width: $tablet) {
    display: block;
  }

  &-list {
    list-style: none;
    padding: 0;
  }

  &-item {
    padding: 1rem 0;

    a {
      font-weight: $weight-light;
      opacity: .8;
      color: $white;

      &:focus,
      &:hover {
        opacity: 1;
      }
    }

    &.is-active {
      a {
        color: $grey-dark;
        opacity: 1;
        font-weight: bold;
      }
    }
  }

  &-toggle {
    border: none;
    outline: none;
    font-size: $size-3;
    background-color: transparent;
    color: $white;
    position: absolute;
    top: 1rem;
    right: 1rem;

    @media screen and (min-width: $tablet) {
      display: none;
    }
  }
}

// Sidebar on mobile
.sidebar {
  background-color: $white;
  width: 100vw;

  @media screen and (min-width: $phone) {
    width: 50vw;
  }

  &-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &-menu {
    text-align: right;
    padding: 16px;
  }

  &-item {
    font-size: $size-3;
    padding: 30px 35px 30px 25px;
    border-top: solid 1px $border-color;

    &:hover {
      background-color: $light;
    }
  }

  &-icon {
    border: none;
    outline: none;
    background-color: transparent;
    font-family: $family-sans-serif;
    font-weight: 100;
    font-size: $size-3;
  }

  &-link {
    color: $black;
    font-weight: $weight-light;
  }
}

// Social networks
.social {
  &-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &-item {
    display: inline-block;
    margin: 0 0.2rem;

    a {
      color: $white;
      font-weight: normal;
    }
  }
}
